<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户评价 - CH洗客系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            background: linear-gradient(135deg, #f0f4ff 0%, #f9fafb 100%);
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <header class="bg-white shadow-sm py-4 px-8 flex items-center justify-between">
        <div class="flex items-center space-x-2">
            <span class="font-pacifico text-2xl text-primary">🧺</span>
            <a href="index.html" class="text-2xl font-bold text-primary tracking-wide">CH洗客系统</a>
        </div>
        <a href="index.html" class="text-primary hover:underline">返回首页</a>
    </header>
    <main class="flex-1 max-w-3xl mx-auto py-12 px-4">
        <h1 class="text-4xl font-extrabold text-gray-900 mb-10 text-center">用户评价</h1>
        <div id="reviews-list" class="space-y-8">
            <!-- 美化后的评价卡片 -->
            <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-shadow duration-300 border border-gray-100 relative">
                <div class="flex items-center mb-4">
                    <div class="w-14 h-14 rounded-full bg-gradient-to-tr from-primary to-secondary p-1 mr-4">
                        <img src="https://ai-public.mastergo.com/ai/img_res/637ee0bb17963623db5651f67e6fa2bc.jpg" alt="用户头像" class="w-full h-full object-cover rounded-full border-2 border-white">
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-900 text-lg flex items-center">林雨晴</h4>
                        <div class="flex items-center mt-1">
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                        </div>
                    </div>
                </div>
                <blockquote class="text-gray-700 italic pl-4 border-l-4 border-primary bg-blue-50/50 rounded">
                    <i class="fas fa-quote-left text-primary mr-2"></i>服务非常专业，我的羊绒大衣洗完后跟新的一样，而且上门取送特别方便，省去了我很多时间。
                </blockquote>
            </div>
            <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-shadow duration-300 border border-gray-100 relative">
                <div class="flex items-center mb-4">
                    <div class="w-14 h-14 rounded-full bg-gradient-to-tr from-primary to-secondary p-1 mr-4">
                        <img src="https://ai-public.mastergo.com/ai/img_res/b4815b426c8a8abb9e6544791062f33c.jpg" alt="用户头像" class="w-full h-full object-cover rounded-full border-2 border-white">
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-900 text-lg flex items-center">张伟</h4>
                        <div class="flex items-center mt-1">
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                        </div>
                    </div>
                </div>
                <blockquote class="text-gray-700 italic pl-4 border-l-4 border-primary bg-blue-50/50 rounded">
                    <i class="fas fa-quote-left text-primary mr-2"></i>作为商务人士，每周都有大量衬衫需要清洗熨烫，CH洗客系统的服务质量和效率让我非常满意。
                </blockquote>
            </div>
            <div class="bg-white p-8 rounded-2xl shadow-lg hover:shadow-2xl transition-shadow duration-300 border border-gray-100 relative">
                <div class="flex items-center mb-4">
                    <div class="w-14 h-14 rounded-full bg-gradient-to-tr from-primary to-secondary p-1 mr-4">
                        <img src="https://ai-public.mastergo.com/ai/img_res/f26e94acd04125923528e0063e689bea.jpg" alt="用户头像" class="w-full h-full object-cover rounded-full border-2 border-white">
                    </div>
                    <div>
                        <h4 class="font-bold text-gray-900 text-lg flex items-center">王阿姨</h4>
                        <div class="flex items-center mt-1">
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                            <i class="fas fa-star text-yellow-400 text-base"></i>
                        </div>
                    </div>
                </div>
                <blockquote class="text-gray-700 italic pl-4 border-l-4 border-primary bg-blue-50/50 rounded">
                    <i class="fas fa-quote-left text-primary mr-2"></i>年纪大了去洗衣店不方便，这个上门服务太好了，客服态度也好，衣服洗得干净，价格也合理。
                </blockquote>
            </div>
            <!-- 可继续添加更多评价 -->
        </div>
        <div class="text-center mt-12">
            <button id="load-more" class="px-8 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-full shadow-md hover:scale-105 hover:shadow-lg transition-all duration-300 font-semibold text-lg">加载更多</button>
        </div>
    </main>
    <footer class="mt-16 py-8 text-center text-gray-400 text-sm">
        © 2023 CH洗客系统 版权所有
    </footer>
    <script>
        // 预留后续动态加载更多评价的JS接口
        document.getElementById('load-more').onclick = function() {
            alert('这里可以实现异步加载更多评价的功能');
        }
    </script>
</body>
</html> 